<template>
  <div>
    <el-dialog :visible="visible" width="30%" @close="visible = !visible" title="修改密码">
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassWord">
          <el-input v-model="formData.confirmPassWord" placeholder="请输入确认密码" clearable show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button type="primary" @click="handelConfirm"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import md5 from 'js-md5'
export default {
  name: 'PasswordPopup',
  props: {
    value: String,
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        password: '',
        confirmPassWord: ''
      },
      rules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            pattern: /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,16}$/,
            message: '6-16位（需同时包含英文字母和数字）',
            trigger: 'blur'
          }
        ],
        confirmPassWord: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            pattern: /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,16}$/,
            message: '6-16位（需同时包含英文字母和数字）',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.visible = false
    },
    handelConfirm() {
      this.$refs['elForm'].validate(async (valid) => {
        if (!valid) return
        if (this.formData.password !== this.formData.confirmPassWord) {
          this.$message.error('两次输入的密码不一致，请重新输入！')
          return
        }
        const { password, confirmPassWord } = this.formData
        const params = {
          id: this.$route.query.id,
          password: md5(password),
          confirmPassWord: md5(confirmPassWord)
        }
        const { status, msg } = await this.$http.system.admin.updatePassword(params)
        if (status === 200) {
          this.$message.success('修改成功')
          this.visible = false
          this.$emit('input', password)
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>
<style></style>
